import { Outlet, useNavigate } from "react-router-dom"
import { AppstoreOutlined, HomeOutlined, ShoppingCartOutlined, UserOutlined } from "@ant-design/icons"
import "./index.css"
import { useEffect } from "react"

const menu = [
    { key: 'home', icon: <HomeOutlined />, label: '首页' },
    { key: 'category', icon: <AppstoreOutlined />, label: '分类' },
    { key: 'cart', icon: <ShoppingCartOutlined />, label: '购物车' },
    { key: 'user', icon: <UserOutlined />, label: '我的' },
]

function Mall() {
    const navigate = useNavigate()
    useEffect(() => {
        if (window.location.pathname === '/mall') {
            navigate('/mall/home')
        }
    }, [navigate])

    const curPath = window.location.pathname
    const curKey = curPath.substring(curPath.lastIndexOf('/') + 1)
    const mallMenu = menu.map(item => (
        <div className={item.key === curKey ? "menu-item cur" : "menu-item"}
            onClick={() => {
                navigate(item.key)
            }}
            key={item.key}
        >
            {item.icon}
            {item.label}
        </div>
    ))
    return (
        <div className="mall-container">
            <header className="mall-menu">
                {mallMenu}
            </header>
            <div className="mall-content">
                <Outlet />
            </div>
            <footer className="mall-menu">
                {mallMenu}
            </footer>
        </div>
    )
}

export default Mall